<template>
    <div class="like-list">
      <div class="title-wrapper">
        <span class="title">
          <i class="iconfont">&#xe633;</i>
          猜你喜欢
        </span>
      </div>
      <div class="items-list vux-1px-b" v-for=" i in 6" :key="i">
        <div class="item-img">
          <img width="100%" src="http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg" alt="">
        </div>
        <div class="item-desc">
          <p class="title">北京野生动物园</p>
          <p class="comment">
            <i class="iconfont">&#xe642;&#xe642;&#xe642;&#xe642;&#xe642;</i>
            <span class="count">12334条评论</span>
          </p>
          <p class="price-box">
            <span class="price">￥20</span>起
            <span class="addr">大兴区</span>
          </p>
        </div>
      </div>
      <div class="more">查看所有产品</div>
    </div>
</template>

<script>
export default {
  name: 'likeList'
}
</script>

<style lang="stylus" scoped>
  .vux-1px-b:after
    border-bottom: 1px solid #e0e0e0
  .like-list
    margin-top: .3rem
    background: #fff
    padding-top: .3rem
    padding-left: .2rem
    .title
      font-size: .32rem
      .iconfont
        color: #ff8a43
        font-size: .32rem
    .items-list
      padding: .3rem 0
      display: flex
      .item-img
        width: 2rem
        height: 2rem
      .item-desc
        flex: 1
        padding: .3rem 0 0 .2rem
        .comment
          padding: .2rem 0 .3rem 0
          color: #ffb436
          .count
            margin-left: .3rem
        .price
          font-size: .4rem
          color: #ff8300
        .addr
          line-height: .4rem
          margin-right: .2rem
          display: inline-block
          float: right
          color: #666
    .more
      padding: .3rem 0
      text-align: center
      color: #00afc7
</style>
